<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no,email=no" />
		<title>金豆商城</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
	</head>
	<body>
		<div id="IntegralMall">
			<div style="width: 100%; height: 100px; background-color: #000000;">
				
			</div>
			<div>
				<h3 class="custom-title">热销商品</h3>
				<ul class="mui-table-view mui-grid-view mui-clearfix index-product" id="giftList"></ul>
			</div>

		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/delayimg.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			
			mui.init({
				pullRefresh : {
				    container:'#IntegralMall',
				    deceleration:0.0006,
				    up : {
					    contentrefresh : "正在加载...",
					    contentnomore:'已加载全部热门微店',
					    callback :function(){
					      	
				    	}
				    },
				    down : {
						contentdown : "下拉可以刷新",
						contentover : "释放立即刷新",
						contentrefresh : "正在刷新...",
						callback :function(){
							
						}
				    }
				}
			});
			
			mui.plusReady(function() {
						var pImgLen=0;
				loadPage=function(){
					mui.ajax(URL+'api/home/Get?pageNo=1&pageSize=10',{
						dataType:'json',
						type:'get',
						success:function(data){
							console.log(data)
							if(data.Success=='true'){
								var imgLen=data.Slide.length;
								
							
								//第一页商品
								if (data.TotalProduct<=10) {isnodata = true;}
								if (data.Product.length > 0) {
				                    var html = '';
				                    for (var i = 0; i < data.Product.length; i++) {
				                        html += '<li class="mui-table-view-cell mui-media mui-col-xs-6">'+
		                        			'<div class="index-product-box">';
		                        				if(data.Product[i].Discount>0)
		                        					html += '<i>'+data.Product[i].Discount+'折</i>';
												html +='<a data-id="'+data.Product[i].Id+'">'+
													'<div class="p-img" style="height:165px"><b data-delay-background="'+data.Product[i].ImageUrl+'"></b></div>'+
													'<div class="mui-media-body">'+data.Product[i].Name+'</div>'+
													'<p class="index-product-price"><span>¥ '+data.Product[i].SalePrice+'</span><em>¥'+data.Product[i].MarketPrice+'</em></p>'+
												'</a>'+
											'</div>'+
					            		'</li>';
				                    }
				                    document.getElementById('giftList').innerHTML=html;
				                    imgWidth = document.getElementsByClassName('p-img')[0].offsetWidth;
				                    pImgLen+=data.Product.length;
				                    for(var i=0; i<pImgLen; i++){
				                    	document.getElementsByClassName('p-img')[i].style.height= imgWidth+'px';
				                    }
				                    //图片延迟加载初始化
				                    delayimg.init();
				                }
								window.scrollTo(0,0)
								plus.navigator.closeSplashscreen();
								document.getElementById('IntegralMall').className='mui-content mui-scroll-wrapper';
							}
						},
						error:function(xhr,type,errorThrown){
							plus.navigator.closeSplashscreen();
							var errorText='<div class="empty-show"><h4>网络不给力，请检查网络！</h4><button id="reloadWv" class="mui-btn mui-btn-negative">重新加载</button></div>'
							document.getElementById('IntegralMall').innerHTML=errorText;
							document.getElementById('IntegralMall').className='mui-content mui-scroll-wrapper';
						}
					});
				}
				
				loadPage();
				
				//添加列表项的点击事件
				mui('#productsList').on('tap', 'a', function(e) {
					var id = this.getAttribute('data-id');
					showProduct(id);
				});
				
			});
			
			
		</script>
	</body>
</html>
